import React, { useEffect, useState } from 'react';
import NavBar from '../publicZujian/NavBar';
import { Morenewdiscs } from '../../Request/morList';
import './index.css';
import { useHistory } from 'react-router-dom';

export default () => {
  const [monthDatas, setMonthData] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await Morenewdiscs()
      setMonthData(data.albums)
    }
    fetchData()


  }, [])

  return (
    <div>
      <NavBar value="新碟上架" />
      <div className="mor-main-dv">
        {/* title */}
        <header className="mor-main-title">本月新碟</header>

        {/* 正文list */}
        <div className="mor-main-items">
          {/* 每项list */}
          {
            monthDatas.map((value, index) => <div className="mordis-item-list" key={index}>
              <div className="mor-item-img-wrap">
                <img src={value.blurPicUrl} alt="" />
              </div>
              <p className="mor-item-txt">{value.name}</p>
              <p className="mor-item-item-name">{value.artists[0].name}</p>
            </div>)
          }

        </div>

      </div>
    </div>
  )
}
